﻿
@{
    ViewBag.Title = "index";
    Layout = "~/Areas/HouTaiArea/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>
@section head{
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
}
<style>

    button {
        background-color: #CCE8EB; /* Green */
        border: none;
        color: #666;
        /*padding: 15px 32px;*/
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        border: 1px solid #cad9ea;
    }

    #table {
        margin-left: 22%;
        font-size: 14px;
        width: 79%;
        border-collapse: collapse;
        text-align: center;
    }

        #table td, table th {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }

    table thead th {
        background-color: #CCE8EB;
        width: 100px;
    }

    table tr:nth-child(odd) {
        background: #fff;
    }

    table tr:nth-child(even) {
        background: #F5FAFA;
    }
</style>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>index</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <h3></h3>
    <div>
        <div>
            <h5 class="card-header">条件查询</h5>
            <div>
                <div class="form-group" style="padding-left:50%">

                    &nbsp; &nbsp;<input type="text" class="form-control" id="cid" placeholder="编号" style="width:300px">
                    <br />
                    &nbsp;
                    @*<input type="text" class="form-control" id="ctitle" placeholder="名称" style="width:300px">*@
                </div>
                <br />
                <div class="form-group" style="padding-left:15%">
                    <button id="sel" class="btn btn-primary">查询</button>
                </div>
            </div>
        </div>
        <table id="table" class="table table-bordered table-hover
               text-center">
            <thead class="thead-dark">
                <tr>
                    <th>编号</th>
                    <th>栏目名称</th>
                    <th>栏目英文名</th>
                    <th>显示在导航</th>
                    <th>显示在导航上的顺序</th>
                    <th>是否被搜索</th>
                    <th>操作</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tbody"></tbody>
        </table>
        <div id="example" aria-label="Page navigation">
            <ul id="pageLimit" class="pagination"></ul>
        </div>
    </div>
    <script src="~/Scripts/jquery-3.6.0.js"></script>
    <script src="~/Scripts/bootstrap-paginator.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script>
        $(function () {
            $.ajax({
                url: "@Url.Action("SelectPage")",
                datatype: 'json',
                type: "get",
                data: { pageindex: 1, pagesize:5},
                success: function (data) {
                    dataShow(data);
                    $('#example').bootstrapPaginator(Getoptions(JSON.parse(data)));
                },
                error: function () { }
            });

            $("#sel").click(function () {
                $.post("@Url.Action("SelectPage")",
                    {
                        pageindex: 1,
                        pagesize: 5,
                        "cid": $("#cid").val(),
                    }, function (data) {
                    dataShow(data);
                    $('#example').bootstrapPaginator(Getoptions(JSON.parse(data)));
                });
            });
        })
        //表格显示数据
        function dataShow(r) {
            $(".table tr:gt(0)").remove();
            if (r != null) {
                $.each(eval("(" + r + ")").list, function (index, item) { //遍历返回的json
                    var tr = $("<tr>").appendTo(".table");
                    $("<td>").appendTo(tr).text(item.cid);
                    $("<td>").appendTo(tr).text(item.ctitle);
                    $("<td>").appendTo(tr).text(item.cname);

                    if (item.nav == true) {
                        $("<td>").appendTo(tr).text("错误的");
                    } else  {
                        $("<td>").appendTo(tr).text("真的");
                    }
                    $("<td>").appendTo(tr).text(item.navorder);
                    if (item.search == true) {
                        $("<td>").appendTo(tr).text("错误的");
                    } else {
                        $("<td>").appendTo(tr).text("真的");
                    }

                    $("<td/>").appendTo(tr).html("<a href=Update/" + item.cid + " > 修改</a >");
                    $("<td/>").appendTo(tr).html("<a href=Delete/" + item.cid + " > 删除</a >");
                });
            }
        }
        //显示分页插件的数据
        function Getoptions(r) {
            return {
                currentPage: r.currentPage, //当前页数
                totalPages: r.pageSum, //总页数
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "末页";
                        case "page":
                            return page;
                    }
                },//点击事件，用于通过Ajax来刷新整个list列表
                onPageClicked: function (event, originalEvent, type, page) {
                    $.post("@Url.Action("SelectPage")",
                        {
                            pageindex: page,
                            pagesize: 5,
                            "cid": $("#cid").val(),
                            //"sex": $("input[name='sex']:checked").val()
                        }, function (r) {
                        dataShow(r);
                    });
                }
            }
        }
    </script>
</body>
</html>
